<template>
  <Header></Header>

  <!-- 主内容区域 -->
  <main class="container max-w-screen-xl mx-auto p-4 px-6">
    <!-- grid 表格布局，分为 4 列 -->
    <div class="grid grid-cols-4 gap-7">
      <!-- 左边栏，占用 3 列 -->
      <div class="col-span-4 md:col-span-3 mb-3">
        <!-- 标签 -->
        <div
          v-if="tags && tags.length > 0"
          class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700"
        >
          <div class="flex items-center">
            <svg
              t="1761957628792"
              class="icon w-4 h-4 mr-2 mb-3 dark:text-white"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6785"
              width="200"
              height="200"
            >
              <path
                d="M582.02996 986.738351c-13.697977 0-27.39493-5.212722-37.824467-15.639189L89.942475 516.831029c-4.267187-3.928472-21.856797-22.12081-21.596877-54.717206L50.167586 67.275219c-0.23843-5.173836 1.713015-10.209526 5.375427-13.871939l0.676405-0.676405c3.662413-3.662413 8.698103-5.610788 13.871939-5.375427l394.838603 18.178011c32.637328-0.270153 50.792826 17.33276 54.718229 21.597901l454.266088 454.260971c20.849864 20.857027 20.849864 54.78986 0.00307 75.644841l-32.743752 32.742728c-7.192819 7.192819-18.85544 7.192819-26.048259 0s-7.192819-18.85544 0-26.048259l32.740682-32.740682c6.488785-6.491855 6.488785-17.058514-0.00307-23.552415L493.26838 112.846114c-0.468674-0.468674-0.50756-0.469698-0.852414-0.900509-1.249457-1.261737-10.387581-9.828856-27.541263-9.574053-0.372483 0.007163-0.743944 0-1.115404-0.017396L87.86414 85.049025l17.305131 375.894136c0.017396 0.37146 0.022513 0.74292 0.017396 1.11438-0.249687 17.170055 8.31334 26.292829 9.574053 27.542286 0.429789 0.344854 0.430812 0.382717 0.900509 0.852414l454.592522 454.596615c6.491855 6.489808 17.056468 6.491855 23.548322 0l218.781842-218.779795c2.734274-2.735297 33.516348-32.255635 87.008656-32.255635 10.172687 0 18.419512 8.246825 18.419512 18.419512s-8.246825 18.419512-18.419512 18.419512c-38.918381 0-60.595077 21.093411-60.803831 21.306258-0.052189 0.054235-0.104377 0.106424-0.156566 0.158612L619.851357 971.097116C609.425913 981.523583 595.727936 986.737328 582.02996 986.738351z"
                fill="#FF9000"
                p-id="6786"
              ></path>
              <path
                d="M225.154993 290.479791c-38.251186 0-69.37095-31.119765-69.37095-69.37095s31.119765-69.37095 69.37095-69.37095 69.37095 31.119765 69.37095 69.37095S263.406179 290.479791 225.154993 290.479791zM225.154993 188.576913c-17.938558 0-32.531927 14.59337-32.531927 32.531927 0 17.938558 14.59337 32.531927 32.531927 32.531927 17.937534 0 32.531927-14.59337 32.531927-32.531927C257.685897 203.170283 243.092527 188.576913 225.154993 188.576913z"
                fill="#FF9000"
                p-id="6787"
              ></path>
            </svg>
            <!-- 标签标题 -->
            <h2 class="mb-3 font-bold text-gray-900 uppercase dark:text-white">标签</h2>
          </div>
          <!-- 标签列表 -->
          <span
            v-for="(tag, index) in tags"
            :key="index"
            @click="goTagArticleListPage(tag.id, tag.name)"
            class="inline-block mb-1 cursor-pointer bg-green-100 text-green-800 text-xs font-medium mr-2 px-3 py-1 rounded-full hover:bg-green-200 hover:text-green-900 dark:bg-green-900 dark:text-green-300"
          >
            {{ tag.name }}
          </span>
        </div>
      </div>

      <!-- 右边侧边栏，占用一列 -->
      <aside class="col-span-4 md:col-span-1">
        <div class="sticky top-[5.5rem]">
          <!-- 博主信息 -->
          <UserInfoCard></UserInfoCard>

          <!-- 分类 -->
          <CategoryListCard></CategoryListCard>
        </div>
      </aside>
    </div>
  </main>
  <!-- 返回顶部 -->
  <ScrollToTopButton></ScrollToTopButton>
  <!-- Footer直接加固定定位属性 -->
  <Footer style="position: fixed; bottom: 0; left: 0; right: 0; width: 100%" />
</template>

<script setup>
  import Header from "@/layouts/frontend/components/Header.vue";
  import Footer from "@/layouts/frontend/components/Footer.vue";
  import UserInfoCard from "@/layouts/frontend/components/UserInfoCard.vue";
  import CategoryListCard from "@/layouts/frontend/components/CategoryListCard.vue";
  import { getTagList } from "@/api/frontend/tag";
  import { ref } from "vue";
  import { useRouter } from "vue-router";
  import ScrollToTopButton from "@/layouts/frontend/components/ScrollToTopButton.vue";
  const router = useRouter();
  // 所有标签
  const tags = ref([]);
  getTagList().then(res => {
    if (res.success) {
      tags.value = res.data;
    }
  });

  // 跳转标签文章列表页
  const goTagArticleListPage = (id, name) => {
    // 跳转时通过 query 携带参数（标签 ID、标签名称）
    router.push({ path: "/tag/article/list", query: { id, name } });
  };
</script>
